<template>
  <div class="operation-detail">
    <el-row :gutter="20">
      <!-- 基本信息 -->
      <el-col :span="12">
        <el-card class="detail-card" shadow="never">
          <div slot="header">
            <span><i class="el-icon-info"></i> 基本信息</span>
          </div>
          <div class="detail-content">
            <div class="detail-item">
              <span class="label">记录ID：</span>
              <span class="value">{{ detailData.logId }}</span>
            </div>
            <div class="detail-item">
              <span class="label">器具编码：</span>
              <span class="value">{{ detailData.container ? detailData.container.containerCode : '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">操作类型：</span>
              <el-tag :class="'operation-type-' + detailData.operationType" size="small">
                {{ getOperationTypeName(detailData.operationType) }}
              </el-tag>
            </div>
            <div class="detail-item">
              <span class="label">操作时间：</span>
              <span class="value">{{ parseTime(detailData.operationTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 操作人员 -->
      <el-col :span="12">
        <el-card class="detail-card" shadow="never">
          <div slot="header">
            <span><i class="el-icon-user"></i> 操作人员</span>
          </div>
          <div class="detail-content">
            <div class="detail-item">
              <span class="label">操作人员：</span>
              <span class="value">{{ detailData.operatorName || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">操作人ID：</span>
              <span class="value">{{ detailData.operatorId || '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">创建时间：</span>
              <span class="value">{{ parseTime(detailData.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </div>
            <div class="detail-item">
              <span class="label">创建人：</span>
              <span class="value">{{ detailData.createBy || '-' }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 操作位置 -->
      <el-col :span="12">
        <el-card class="detail-card" shadow="never">
          <div slot="header">
            <span><i class="el-icon-location"></i> 操作位置</span>
          </div>
          <div class="detail-content">
            <div class="detail-item">
              <span class="label">操作仓库：</span>
              <span class="value">{{ detailData.warehouse ? detailData.warehouse.warehouseName : '-' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">GPS坐标：</span>
              <span class="value" v-if="detailData.latitude && detailData.longitude">
                {{ detailData.latitude }}, {{ detailData.longitude }}
                <el-button type="text" size="mini" @click="showLocation">查看地图</el-button>
              </span>
              <span class="value" v-else>-</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 备注信息 -->
      <el-col :span="12">
        <el-card class="detail-card" shadow="never">
          <div slot="header">
            <span><i class="el-icon-edit-outline"></i> 备注信息</span>
          </div>
          <div class="detail-content">
            <div class="detail-item">
              <span class="label">备注：</span>
              <span class="value">{{ detailData.remark || '-' }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 操作详情 -->
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="detail-card" shadow="never">
          <div slot="header">
            <span><i class="el-icon-document"></i> 操作详情</span>
          </div>
          <div class="detail-content">
            <div v-if="formattedOperationDetail" class="operation-detail-content">
              <div v-for="(section, sectionName) in formattedOperationDetail" :key="sectionName" class="detail-section">
                <h4 class="section-title">{{ sectionName }}</h4>
                <div v-if="typeof section === 'object'" class="section-content">
                  <div v-for="(value, key) in section" :key="key" class="detail-item">
                    <span class="label">{{ key }}：</span>
                    <span class="value">{{ value }}</span>
                  </div>
                </div>
                <div v-else class="section-content">
                  <span class="value">{{ section }}</span>
                </div>
              </div>
            </div>
            <div v-else class="no-detail">
              <el-empty description="暂无操作详情"></el-empty>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "OperationDetail",
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    formattedOperationDetail() {
      if (!this.detailData.operationDetail) return null;
      
      try {
        const detail = typeof this.detailData.operationDetail === 'string' 
          ? JSON.parse(this.detailData.operationDetail) 
          : this.detailData.operationDetail;
        
        // 根据操作类型格式化详情
        return this.formatDetailByOperationType(detail, this.detailData.operationType);
      } catch (e) {
        return { '原始数据': this.detailData.operationDetail };
      }
    }
  },
  methods: {
    getOperationTypeName(type) {
      const typeMap = {
        '1': '新增',
        '2': '定位器绑定',
        '3': '定位器解绑',
        '4': '清洗',
        '5': '折叠整理',
        '6': '装箱',
        '7': '拆箱',
        '8': '封存',
        '9': '解封',
        '10': '维修',
        '11': '检查'
      };
      return typeMap[type] || '未知';
    },
    
    formatDetailByOperationType(detail, operationType) {
      if (!detail || typeof detail !== 'object') return null;
      
      // 根据操作类型定制显示格式
      switch (operationType) {
        case '6': // 装箱
          return {
            '项目信息': {
              '项目编码': detail.projectCode || '-',
              '项目名称': detail.projectName || '-'
            },
            '物料信息': {
              '物料编码': detail.materialCode || '-',
              '物料名称': detail.materialName || '-',
              '装箱数量': detail.quantity || '-',
              '内衬方案': detail.liningScheme || '-'
            }
          };
        case '7': // 拆箱
          return {
            '项目信息': {
              '项目编码': detail.projectCode || '-',
              '项目名称': detail.projectName || '-'
            },
            '物料信息': {
              '物料编码': detail.materialCode || '-',
              '物料名称': detail.materialName || '-',
              '拆箱数量': detail.quantity || '-'
            }
          };
        case '2': // 定位器绑定
          return {
            '定位器信息': {
              '定位器编码': detail.locatorCode || '-',
              '设备型号': detail.deviceModel || '-',
              '绑定时间': detail.bindTime || '-'
            }
          };
        case '3': // 定位器解绑
          return {
            '定位器信息': {
              '定位器编码': detail.locatorCode || '-',
              '解绑时间': detail.unbindTime || '-',
              '解绑原因': detail.unbindReason || '-'
            }
          };
        default:
          // 默认格式化
          return { '详细信息': detail };
      }
    },
    
    showLocation() {
      if (this.detailData.latitude && this.detailData.longitude) {
        // 这里可以集成地图组件显示具体位置
        this.$message.info(`位置坐标：${this.detailData.latitude}, ${this.detailData.longitude}`);
      }
    }
  }
};
</script>

<style scoped>
.operation-detail {
  padding: 10px;
}

.detail-card {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.detail-card .el-card__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  padding: 15px 20px;
}

.detail-card .el-card__body {
  padding: 20px;
}

.detail-content {
  min-height: 120px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 1.5;
}

.detail-item .label {
  width: 100px;
  color: #606266;
  font-weight: 500;
  flex-shrink: 0;
}

.detail-item .value {
  color: #303133;
  flex: 1;
}

.operation-detail-content {
  max-height: 400px;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 20px;
}

.section-title {
  margin: 0 0 10px 0;
  color: #409eff;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 5px;
}

.section-content {
  padding-left: 10px;
}

.no-detail {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

/* 操作类型标签样式 */
.operation-type-1 { background-color: #e6f7ff; color: #1890ff; }
.operation-type-2 { background-color: #f6ffed; color: #52c41a; }
.operation-type-3 { background-color: #fff2e8; color: #fa8c16; }
.operation-type-4 { background-color: #f0f5ff; color: #722ed1; }
.operation-type-5 { background-color: #e6fffb; color: #13c2c2; }
.operation-type-6 { background-color: #f6ffed; color: #52c41a; }
.operation-type-7 { background-color: #fff2e8; color: #fa8c16; }
.operation-type-8 { background-color: #fff1f0; color: #f5222d; }
.operation-type-9 { background-color: #f6ffed; color: #52c41a; }
.operation-type-10 { background-color: #fff7e6; color: #fa541c; }
.operation-type-11 { background-color: #f0f5ff; color: #2f54eb; }

.el-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
</style> 